<!--  推广编辑  -->

<template>
	<view class="trafficShare_edit">
		<view class="form">
			<view class="form_item">
				<view class="form_item_title">
					1.推广标题
				</view>
				<view class="form_item_content">
					<input class="form_item_content_ipt" type="text" v-model="form.release_title"
						placeholder="请输入推广标题" />
				</view>
			</view>
			<view class="form_item">
				<view class="form_item_title">
					2.产品链接
				</view>
				<view class="form_item_content">
					<input class="form_item_content_ipt" type="text" v-model="form.release_url" placeholder="请输入产品链接" />
				</view>
			</view>
			<view class="form_item">
				<view class="form_item_title">
					3.推广通道
				</view>
				<view class="form_item_content" @click="()=>show=true">
					<view class="form_item_content_title">
						{{form.release_name?form.release_name:'请选择推广通道'}}
					</view>
					<u-icon name="e683" size="25" color="#999999" custom-prefix="iconfont"></u-icon>
				</view>
			</view>
			<view class="form_item">
				<view class="form_item_title_content">
					<view class="form_item_title">
						4.推广数量
					</view>
					<view class="form_item_title_t">
						链豆：{{form.bean}}
					</view>
				</view>
				<view class="form_item_content">
					<input class="form_item_content_ipt" type="text" v-model="form.release_num" placeholder="请输入推广数量" />
				</view>
			</view>
			<view class="form_item">
				<view class="form_item_title">
					5.推广文案
				</view>

				<textarea class="form_item_textarea"  v-model="form.release_content"
					placeholder="请输入推广文案" maxlength='300' />
			</view>
			<view class="form_item">
				<view class="form_item_title">
					6.推广海报
				</view>
				<view class="upload">
					<view class="upload-box">
						<view class="upload-item" v-for="(item,index) in productList" :key='item.key'>
							<image :src="item.image" class="upload-imageList"></image>
							<view class="upload-delete" @click="onDelete(index)">x</view>
						</view>
						<view class="upload-item" @click="onUploadImage()">
							<image src="../../../static/pz.jpg" class="upload-image"></image>
						</view>
						<!-- 占位置 -->
						<!-- len 为数组长度 3位每行所占位置 -->
						<view class="upload-line"
							v-for='(item,index) in productList.length % 3==0?0:3 -(productList.length % 3)-1'
							:key='index'>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="go-tg" @click="confirm">
			立即推广
		</view>
		<u-popup v-model="show" mode='center' height="230" :mask-close-able='false' border-radius="15">
			<u-checkbox-group @change="onChannel">
				<view class="chebok_channel">
					<u-checkbox v-model="item.checked" v-for="(item, index) in list" :key="index"
						:name="item.name+item.value">
						{{item.value}}
					</u-checkbox>
				</view>
			</u-checkbox-group>
			<view class="chebok_channel_btn" @click="onSumChannel">
				确定
			</view>
		</u-popup>
		
		
				
	</view>
</template>

<script>
	import {
		uploadImage
	} from '@/utils/upload';
	export default {
		data() {
			return {
				list: [{
						name: 1,
						value: '站内消息',
						checked: false,
						disabled: false
					},
					{
						name: 2,
						value: '短信推广',
						checked: false,
						disabled: false
					},
					{
						name: '3',
						value: '微信推广',
						checked: false,
						disabled: false
					}
				],
				show: false,
				key: 0,
				productList: [],
				form: {
					release_title: '', //推广标题
					release_content: '', //推广文案
					release_url: '', //产品链接
					release_img: '', //推广海报
					release_num: '', //推广数量
					release_type: '', //推广渠道
					release_name: '', //推广中文
					bean: '', //推广中文
				},
				checkInputList: {
					release_title: {
						message: '请输入推广标题'
					},
					release_content: {
						message: '请输入推广文案',
					},
					release_url: {
						message: '请输入产品链接',
					},
					release_img: {
						message: '请输入推广海报',
					},
					release_num: {
						message: '推广数量需要数字类型',
						method: 'pureNumber'
					},
					release_type: {
						message: '请输入推广渠道',
					},
				},
			}
		},
		onLoad(options) {
			this.initPage()
		},
		methods: {
			initPage() {
				let pages = getCurrentPages();
				pages = pages[pages.length - 2]
				Object.assign(this.form, pages.$vm.$children[0].paramsData)
				console.log(this.form,'this.form')
			},
			// 上传
			onUploadImage() {
				uploadImage().then(res => {
					this.addKey(res)
				})
			},
			
			// 删除图片
			onDelete(index, name) {
				this.productList.splice(index, 1)
				this.form.release_img = this.productList.reduce((pre, el) => {
					pre.push(el.image)
					return pre
				}, []).join(',')
			
			},

			confirm() {
				let form = JSON.parse(JSON.stringify(this.form))
				this.checkInput().then(res => {
					
					if (res) {
						
						if(form.bean<form.release_num){
							this.$toast('不能超出链豆')
							return
						}
						
							delete form.release_name
							delete form.bean
						uni.showLoading({
							title: '正在提交',
							icon: 'none'
						})
						this.$adminPost('SetProductExtension', {
							...form,
							pk_id: this.vuex_business.pk_id
						}).then(res => {
							uni.hideLoading()
							this.$toast('推广成功')
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1
								})
							},1000)
						}).catch(() => {
							uni.hideLoading()
							this.$toast('失败')
						})
					}
				})

			},

			// 选择推广通道
			onChannel(e) {
				let arr = JSON.parse(JSON.stringify(e))
				if (arr[0]) {
					let release_type = arr.map(el => {
						return el[0]
					})
					this.form.release_type = release_type.join(',')
					this.form.release_name = e.join(',')
				}
			},

			// 确定推广通道
			onSumChannel() {
				this.show = false
			},

			pureNumber(value) {
				if (!/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value)) {
					return true
				} else {
					return false
				}

			},




			// 表单验证
			checkInput() {
				let $this = this
				return new Promise((resolve, reject) => {
					let judeg = true
					let judeg2 = true //如果有一个发生错误就终止循环
					for (let i in $this.checkInputList) {
						if (!judeg2) {
							return
						}
						if (judeg) {
							let method = $this.checkInputList[i].method
							if (method && $this[method](this.form[i])) {
								judeg = false
								judeg2 = false
								$this.$toast($this.checkInputList[i].message)
							} else if (!$this.form[i] && $this.form[i] != '0') {
								judeg = false
								judeg2 = false
								$this.$toast($this.checkInputList[i].message)
							}


						}
					}
					resolve(judeg)
				})
			},

			//为图片添加key
			addKey(item) {
				if (!Array.isArray(item)) return
				let productList = item.reduce((pre, el) => {
					pre.push({
						image: el,
						key: this.key += 1
					})
					return pre
				}, [])
				if (!this.productList[0]) {
					this.productList = productList
				} else {
					this.productList = this.productList.concat(productList)
				}
				this.form.release_img = this.productList.map(el => { //转换格式
					return el.image
				}).join(',')
			},
		}
	}
</script>

<style lang='scss' scoped>
	.trafficShare_edit {
		padding: 30rpx 45rpx;
	}

	.form_item {
		margin-bottom: 40rpx;
	}

	.form_item_title {
		width: 150rpx;
		position: relative;
		font-size: 28rpx;
		font-weight: 500;
		color: #222222;
	}

	.form_item_title::after {
		position: absolute;
		right: 0;
		top: 0;
		content: "*";
		color: #ff4d4f;
		margin-left: 4rpx;

	}

	.form_item_title_content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.form_item_content {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 78rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		border-radius: 8rpx;
		margin-top: 20rpx;
		padding: 0 20rpx;
	}

	.form_item_content_ipt {
		width: 100%;
		height: 100%;
	}

	.form_item_content_title {
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
		display: flex;
		align-items: center;
	}

	.form_item_title_t {
		font-size: 28rpx;
		font-weight: 500;
		color: #FF2323;
	}

	.form_item_textarea {
		width: 100%;
		height: 200rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		border-radius: 8rpx;
		padding: 20rpx;
		color: #999999;
		font-size: 28rpx;
	}

	.go-tg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 662rpx;
		height: 90rpx;
		background: #3297EF;
		border-radius: 8rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-bottom: 40px;
	}

	.upload {
		width: 100%;
		background: #FFFFFF;
		padding: 30rpx;
		box-sizing: border-box;

		.upload-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #222222;
			margin-bottom: 30rpx;
		}

		.upload-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.upload-line {
				width: calc(100% / 3 - 40rpx);
				height: 216rpx;
			}

			.upload-item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: calc(100% / 3 - 40rpx);
				height: 157rpx;
				background: #EEEEEE;
				border-radius: 8rpx;
				margin-bottom: 30rpx;

				.upload-delete {
					position: absolute;
					text-align: center;
					line-height: 35rpx;
					font-size: 30rpx;
					font-weight: 700;
					right: -10rpx;
					top: -15rpx;
					width: 35rpx;
					height: 35rpx;
					color: #ffffff;
					border-radius: 50%;
					background-color: red;
				}

				.upload-image {
					width: 50rpx;
					height: 44rpx;
				}

				.upload-imageList {
					width: 100%;
					height: 100%;
				}
			}

		}
	}

	.chebok_channel {
		padding: 30rpx 20rpx;
	}

	.chebok_channel_btn {
		width: 70%;
		height: 60rpx;
		color: #fff;
		font-size: 25rpx;
		margin: 0 auto;
		text-align: center;
		line-height: 60rpx;
		background-color: #3297EF;
		margin-top: 60rpx;
		border-radius: 10rpx;
	}
</style>
